<template>
	<view class="extension">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#0b0a34"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view class="addActivity">
					<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules">
						<uni-forms-item label="活动标题" required :label-width=width>
							<uni-easyinput v-model="baseFormData.name" placeholder="20字以内" />
						</uni-forms-item>
						<uni-forms-item label="活动内容" required :label-width=width>
							<uni-easyinput type="textarea" v-model="baseFormData.content" placeholder="200字以内" />
						</uni-forms-item>
						<!-- 	<uni-forms-item label="活动日期" required :label-width=width>
							<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
						</uni-forms-item>
						<uni-forms-item label="营业时间" required :label-width=width>
							<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.time" />
						</uni-forms-item> -->
						<uni-forms-item label="活动日期" required :label-width=width>
							<picker mode="date" :value="startdate"  @change="startDateChange">
								<view class="uni-input">{{startdate}}</view>
							</picker>
							-
							<picker mode="date" :value="enddate" :start="threeDays" @change="endDateChange">
								<view class="uni-input">{{enddate}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="营业时间" required :label-width=width>
							<picker mode="time" :value="startTime"  @change="startTimeChange">
								<view class="uni-input">{{startTime}}</view>
							</picker>
							-
							<picker mode="time" :value="endTime" :start="threeTime" @change="endTimeChange">
								<view class="uni-input">{{endTime}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="活动地址" required :label-width=width>
							<uni-easyinput v-model="baseFormData.address" placeholder="请输入详细地址" />
						</uni-forms-item>
					</uni-forms>
					<view class="model" @click="jumpModel">
						选择活动模板
					</view>
					<button type="primary" @click="submit()">提交</button>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="welfare" v-for="(item,index ) in welfareList" :key="index">
					<view class="nav">
						福利放送
					</view>
					<view class="title">
						<text>活动标题</text><text class="nr">{{item.title}}</text>
					</view>
					<view class="title">
						<text>活动内容</text> <text class="nr">{{item.content}}</text>
					</view>
					<view class="title">
						<text>活动时间</text><text class="nr"> {{item.data}}</text>
					</view>
					<view class="title">
						<text>营业时间</text> <text class="nr">{{item.time}}</text>
					</view>
					<view class="title">
						<text>活动地址</text> <text class="nr">{{item.address}}</text>
					</view>
					<view class="btn">
						<button class="remove">下架</button>
						<button class="release">发布</button>
					</view>


				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const baseForm=ref()
	const current = ref(0)
	const items = ref(['新增活动', '已添加活动'])
	const startdate = ref('开始日期')
	const enddate = ref('结束日期')
	const startTime = ref('开始时间')
	const endTime = ref('结束时间')
	const threeDays=ref()
	const threeTime=ref()

	const baseFormData = ref({
		name: '',
		content: '',
		data: '',
		time: '',
		address: ''
	})
	const width = ref(80)
	const range = ref(['2021-02-1', '2021-3-28'])
	const rules = ref({
		name: {
			rules: [{
				required: true,
				errorMessage: '活动名称不能为空'
			}]
		},
		content: {
			rules: [{
				required: true,
				errorMessage: '活动内容不能为空'
			}]
		},
		data: {
			rules: [{
				required: true,
				errorMessage: '请选择开始和结束日期'
			}]
		},
		time: {
			rules: [{
				required: true,
				errorMessage: '请选择营业时间'
			}]
		},
		content: {
			address: [{
				required: true,
				errorMessage: '请填写地址'
			}]
		}
	})
	const welfareList = ref([{
			title: '123',
			content: '123',
			data: '2023-4-11至2024-04-11',
			time: '9:00-21:00',
			address: 'aghlsgjala'
		},
		{
			title: '123',
			content: '123',
			data: '2023-4-11至2024-04-11',
			time: '9:00-21:00',
			address: '2023-4-11至2024-04-112023-4-11至2024-04-112023-4-11至2024-04-112023-4-11至2024-04-11'
		}
	])

	const onClickItem = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}
	const startDateChange=(e)=>{
		console.log(e)
		startdate.value = e.detail.value
		threeDays.value = e.detail.value
	}
	const endDateChange=(e)=>{
		console.log(e)
		enddate.value = e.detail.value
	}
	const startTimeChange=(e)=>{
		console.log(e)
		startTime.value = e.detail.value
		threeTime.value = e.detail.value
	}
	const endTimeChange=(e)=>{
		console.log(e)
		endTime.value = e.detail.value
	}
	const maskClick = (e) => {
		console.log('maskClick事件:', e);
	}
	const jumpModel = () => {
		proxy.sjuNav.navigateTo('/my/model')
	}
	const submit = () => {
		baseForm.value.validate().then(res => {
			console.log(res)
			console.log('success', res);
			uni.showToast({
				title: `校验通过`
			})
		}).catch(err => {
			console.log('err', err);
		})
	}
</script>

<style lang="scss">
	.extension {
		width: 100%;
		// height: 100%;
		padding: 0 10px;
		box-sizing: border-box;

		::v-deep {
			.uni-forms-item__content {
				background: #f6f7fb;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				uni-picker {
					width: 40%;
					text-align: center;
					color: #999;
				}

			}

			.uni-easyinput__content,
			.uni-easyinput__content-textarea,
			.uni-easyinput__content-input {
				border: none;
				background: #f6f7fb;

			}
		}

		.addActivity {
			width: 100%;
			height: 500px;
			margin-top: 20px;
			background: #fff;
			border-radius: 20px;
			padding: 15px;
		}

		.content {
			.model {
				display: flex;
				justify-content: flex-end;
				color: #0091ff;
				margin-bottom: 10px;


			}
		}
	}

	.welfare {
		width: 96%;
		height: auto;
		margin: 10px 2%;
		margin-bottom: 30px;
		background: #fff;
		border-radius: 20px;
		padding: 10px 20px;
		box-sizing: border-box;

		.nav {
			font-size: 16px;
			font-weight: bold;
			font-weight: bold;
			line-height: 2;
		}

		.title {
			line-height: 35px;
			font-size: 14px;
			display: flex;
			flex-direction: row;
			color: #4d4e51;

			text {
				flex-basis: 80px;
			}

			.nr {
				flex-grow: 1;
			}
		}

		.btn {
			display: flex;
			flex-direction: row;
			margin-top: 10px;

			button {
				width: 43%;
				margin: 0 2%;
				border-radius: 30px;
				color: #fff;
			}

			::v-deep uni-button:after {
				border: none !important;
			}

			.remove {
				background-image: linear-gradient(to right, #acd3fe, #73b1f5);
			}

			.release {
				background-image: linear-gradient(to right, #191765, #0b0a35);
			}
		}
	}
</style>